<script setup>
import { ref } from 'vue'
import { Message, Modal } from '@arco-design/web-vue'
import { useRouter } from 'vue-router'

const router = useRouter()
const currentStep = ref(0)
const isStreaming = ref(false)
const videoRef = ref(null)
const isAnalyzing = ref(false)
const showResultModal = ref(false)
const capturedImage = ref(null)

const statusData = [
  {
    label: '相机状态',
    value: '已就绪'
  },
  {
    label: '当前分辨率',
    value: '1920x1080'
  },
  {
    label: '帧率',
    value: '30fps'
  }
]

// 步骤条配置
const steps = [
  {
    title: '预览画面',
    description: '开启相机预览，调整拍摄角度'
  },
  {
    title: '拍摄图像',
    description: '确认预览无误后进行拍摄'
  },
  {
    title: '开始分析',
    description: '对拍摄图像进行分析'
  }
]

// 开启/关闭预览
const toggleStream = () => {
  isStreaming.value = !isStreaming.value
  if (isStreaming.value) {
    currentStep.value = 1
    Message.success('预览已开启')
  } else {
    currentStep.value = 0
    Message.warning('预览已关闭')
  }
}

// 开始拍摄
const startCapture = () => {
  capturedImage.value = 'captured'
  Message.success('拍摄成功')
  currentStep.value = 2
}

// 开始分析
const startAnalysis = () => {
  isAnalyzing.value = true
  Message.loading('正在分析中...')
  
  // 模拟分析过程
  setTimeout(() => {
    isAnalyzing.value = false
    currentStep.value = 3
    showResultModal.value = true
  }, 3000)
}

// 查看结果
const viewResult = () => {
  showResultModal.value = false
  router.push('/app/result')
}

// 继续拍摄
const continueCapture = () => {
  showResultModal.value = false
  restart()
}

// 重新开始
const restart = () => {
  isStreaming.value = false
  isAnalyzing.value = false
  currentStep.value = 0
  Message.info('已重置')
}
</script>

<template>
  <div class="shooting-container">
    <!-- 步骤条 -->
    <a-card class="step-card">
      <a-steps :current="currentStep">
        <a-step
          v-for="(step, index) in steps"
          :key="index"
          :title="step.title"
          :description="step.description"
          :status="currentStep === 3 && index === 2 ? 'finish' : undefined"
        />
      </a-steps>
    </a-card>

    <a-row :gutter="16" class="content-row">
      <!-- 左侧预览区域 -->
      <a-col :span="16">
        <a-card class="camera-preview">
          <template #title>
            <a-space>
              <icon-video-camera />
              {{ currentStep === 2 ? '拍摄预览' : '相机预览' }}
            </a-space>
          </template>
          
          <!-- 未开启预览状态 -->
          <div class="preview-placeholder" v-if="!isStreaming">
            <icon-video-camera :style="{ fontSize: '48px' }" />
            <p>未开启预览</p>
            <a-button type="primary" size="large" @click="toggleStream">
              开启预览
            </a-button>
          </div>
          
          <!-- 预览和拍摄状态 -->
          <div v-else class="preview-content">
            <!-- 实时预览 -->
            <div v-if="currentStep < 2" class="preview-video-container">
              <div class="preview-placeholder-background"></div>
              <video 
                v-show="false"
                ref="videoRef" 
                class="preview-video"
              ></video>
            </div>
            
            <!-- 拍摄结果展示 -->
            <div v-else-if="currentStep === 2" class="capture-result">
              <div class="capture-image">
                <icon-image :style="{ fontSize: '64px' }" />
                <p>拍摄完成</p>
              </div>
            </div>
            
            <!-- 分析状态遮罩 -->
            <div v-if="isAnalyzing" class="preview-overlay">
              <a-spin :loading="true" tip="分析中..." />
            </div>
          </div>
        </a-card>
      </a-col>
      
      <!-- 右侧控制面板 -->
      <a-col :span="8">
        <a-card class="control-panel">
          <template #title>
            <a-space>
              <icon-settings />
              控制面板
            </a-space>
          </template>
          
          <!-- 状态信息 -->
          <a-descriptions :data="statusData" layout="vertical" />
          <a-divider />
          
          <!-- 操作按钮 -->
          <a-space direction="vertical" :style="{ width: '100%' }">
            <!-- 步骤1：预览控制 -->
            <a-button 
              type="primary"
              long
              :disabled="currentStep > 1"
              @click="toggleStream"
            >
              {{ isStreaming ? '停止预览' : '开始预览' }}
            </a-button>

            <!-- 步骤2：拍摄控制 -->
            <a-button
              type="primary"
              status="success"
              long
              :disabled="!isStreaming || currentStep > 1"
              @click="startCapture"
              :style="{
                backgroundColor: isStreaming && currentStep <= 1 ? '#27ae60' : '',
                opacity: (!isStreaming || currentStep > 1) ? '0.35' : '1'
              }"
            >
              拍摄图像
            </a-button>

            <!-- 步骤3：分析控制 -->
            <a-button
              type="primary"
              status="warning"
              long
              :disabled="currentStep < 2 || isAnalyzing"
              :loading="isAnalyzing"
              @click="startAnalysis"
            >
              {{ isAnalyzing ? '分析中...' : '开始分析' }}
            </a-button>

            <!-- 重新开始 -->
            <a-button
              type="outline"
              long
              :disabled="currentStep === 0"
              @click="restart"
            >
              重新开始
            </a-button>
          </a-space>
        </a-card>
      </a-col>
    </a-row>

    <!-- 分析完成对话框 -->
    <a-modal
      v-model:visible="showResultModal"
      :closable="false"
      :mask-closable="false"
      :footer="false"
      width="400px"
    >
      <template #title>
        <div class="modal-title">
          <icon-check-circle-fill class="success-icon" />
          分析完成
        </div>
      </template>
      
      <div class="modal-content">
        <p class="modal-message">图像分析已完成，是否即查看分析结果？</p>
        <div class="modal-statistics">
          <a-descriptions :column="1" :data="[
            {
              label: '分析用时',
              value: '3秒'
            },
            {
              label: '检测结果',
              value: '正常'
            }
          ]" />
        </div>
        <div class="modal-actions">
          <a-space>
            <a-button type="primary" @click="viewResult">
              查看结果
            </a-button>
            <a-button @click="continueCapture">
              继续拍摄
            </a-button>
          </a-space>
        </div>
      </div>
    </a-modal>
  </div>
</template>

<style scoped>
.shooting-container {
  height: 100%;
  padding: 16px;
  display: flex;
  flex-direction: column;
  gap: 16px;
}

.step-card {
  margin-bottom: 16px;
}

.content-row {
  flex: 1;
  min-height: 0;
}

.camera-preview {
  height: 100%;
}

.preview-placeholder {
  height: calc(100% - 48px);
  display: flex;
  flex-direction: column;
  align-items: center;
  justify-content: center;
  gap: 16px;
  color: var(--color-text-3);
  background: var(--color-fill-2);
  border-radius: 4px;
}

.preview-content {
  height: calc(100% - 48px);
  position: relative;
}

.preview-video {
  width: 100%;
  height: 100%;
  object-fit: cover;
  border-radius: 4px;
}

.preview-overlay {
  position: absolute;
  top: 0;
  left: 0;
  right: 0;
  bottom: 0;
  display: flex;
  align-items: center;
  justify-content: center;
  background: rgba(var(--primary-6), 0.1);
  backdrop-filter: blur(4px);
}

.control-panel {
  height: 100%;
}

/* 响应式调整 */
@media screen and (max-width: 768px) {
  .shooting-container {
    padding: 8px;
  }
  
  .content-row {
    flex-direction: column;
  }
  
  .camera-preview, .control-panel {
    height: auto;
  }
}

/* 添加新的样式 */
.modal-title {
  display: flex;
  align-items: center;
  gap: 8px;
  color: rgb(var(--success-6));
}

.success-icon {
  font-size: 24px;
  color: rgb(var(--success-6));
}

.modal-content {
  padding: 16px 0;
}

.modal-message {
  font-size: 16px;
  margin-bottom: 16px;
  color: var(--color-text-1);
}

.modal-statistics {
  margin: 16px 0;
  padding: 12px;
  background: var(--color-fill-2);
  border-radius: 4px;
}

.modal-actions {
  margin-top: 24px;
  text-align: center;
}

:deep(.arco-modal-header) {
  border-bottom: 1px solid var(--color-border-2);
  padding: 16px 20px;
}

:deep(.arco-descriptions-item-label) {
  color: var(--color-text-3);
}

:deep(.arco-descriptions-item-value) {
  color: var(--color-text-1);
  font-weight: 500;
}

/* 添加拍摄结果相关样式 */
.capture-result {
  height: calc(100% - 48px);
  background: var(--color-fill-2);
  border-radius: 4px;
  display: flex;
  align-items: center;
  justify-content: center;
}

.capture-image {
  text-align: center;
  color: var(--color-text-2);
}

.capture-image p {
  margin-top: 16px;
  font-size: 16px;
}

.preview-video-container {
  width: 100%;
  height: calc(100% - 48px);
  position: relative;
  background: var(--color-fill-2);
  border-radius: 4px;
  overflow: hidden;
}

.preview-placeholder-background {
  width: 100%;
  height: 100%;
  background-color: var(--color-fill-2);
  display: flex;
  align-items: center;
  justify-content: center;
}
</style>
